<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   解决for循环中点击事件里的i不能获取到对应下标的问题
<ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
</ul>

<script>
    var c = console.log.bind(document)
    var oli  = document.getElementsByTagName('li')
    // 解决for循环中点击事件里的i不能获取到对应下标的问题
    for (var i = 0;i<oli.length;i++){
        oli[i].onclick=function(){
            c(i)    // 全部都是输出 4
        }
    }
    // 解决方法1    定义一个值来控制
    for (var i = 0;i<oli.length;i++){
        oli[i].index = i
        oli[i].onclick = function(){
            c(this.index)
        }
    }

    // 解决方法2    使用闭包
    for (var i = 0;i<oli.length;i++){
        (function fn(i){
            oli[i].onclick=function(){
            c(i)
        }})(i)
    }

    // 使用闭包模拟私有对象
    function myobj(v){
        var value = v
        c(value)
        return {
            getStyle(num){
                value = num // 这里有参数就把 value 赋值成参数
            },
            setStyle(){
                return value    // 返回 赋值后的 value
            }
        }
    }
    var v = myobj(10)
    c(v.setStyle())
    v.getStyle(20)
    c(v.setStyle())


    var m = myobj(50)
    c(v.setStyle())
    c(m.setStyle())
    
</script>
</body>
</html>